<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
String username = null;
String li = "";
Object o = session.getAttribute("username");
if(o != null) {
	username = o.toString();
	li = "<img onclick=\"location.href='" + basePath + "user/user_logout'\" src=\"images/logout.png\" style=\"height: 24px; cursor:pointer;\"/>";
} else {
	username = "登录";
}
%>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Opoiki Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap-css -->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!--// bootstrap-css -->
<!-- css -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--// css -->
<!-- js -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- js -->
<!--fonts-->
	<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--/fonts-->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->

</head>
<body>
<!--header-->
<div class="header">
	<div class="container">
		<div class="header-left">
			<a href="<%=basePath%>index.jsp"><img src="<%=basePath%>images/logo.png" alt=""/></a>
		</div>
		<div class="header-right">
			<span class="menu">MENU</span>
					<ul class="nav1">
						<li><a class="scroll active" href="#home">首页</a></li>
						<li><a class="scroll" href="#about">简介</a></li>	
						<li><a class="scroll" href="#approach">关于我们</a></li>
						<li><a href="<%=basePath%>document.jsp">使用文档</a></li>
						<li><a id="menu_login" href="<%=basePath%>user/user_main" style="border-width: 1px"><%=username %></a><%=li %></li>
					</ul>
				<!-- script for menu -->
					<script> 
						$( "span.menu" ).click(function() {
						$( "ul.nav1" ).slideToggle( 300, function() {
						 // Animation complete.
						});
						});
					</script>
				<!-- //script for menu -->
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!--banner-->
<div id="home" class="banner">
	<div class="container">
			<!-- responsiveslides -->
					<script src="js/responsiveslides.min.js"></script>
						<script>
							// You can also use "$(window).load(function() {"
							$(function () {
							 // Slideshow 4
							$("#slider3").responsiveSlides({
								auto: true,
								pager: true,
								nav: false,
								speed: 500,
								namespace: "callbacks",
								before: function () {
							$('.events').append("<li>before event fired.</li>");
							},
							after: function () {
								$('.events').append("<li>after event fired.</li>");
								}
								});
								});
					</script>
				<!-- responsiveslides -->
		<div  id="top" class="callbacks_container">
			<ul class="rslides" id="slider3">
				<li>
					<div class="banner-info text-center">
						<h1>教务系统OAuth2.0</h1>
						<p>授权第三方网站登录</p>
						<div class="start">
								<a href="<%=basePath%>user/user_main">登录账号</a>
								<a href="<%=basePath%>user/regist.jsp">申请加入</a>
						</div>
					</div>
				</li>
				<li>
					<div class="banner-info text-center">
						<h1>学生成绩查询API</h1>
						<p>开发者轻松查询学生成绩</p>
						<div class="start">
								<a href="<%=basePath%>user/user_main">登录账号</a>
								<a href="<%=basePath%>user/regist.jsp">申请加入</a>
						</div>
					</div>
				</li>
				<li>
					<div class="banner-info text-center">
						<h1>教务系统授权登录</h1>
						<p>让学生轻松入驻您的网站</p>
						<div class="start">
								<a href="<%=basePath%>user/user_main">登录账号</a>
								<a href="<%=basePath%>user/regist.jsp">申请加入</a>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!--//banner-->
<!--about-->
<div id="about" class="about">
	<div class="about-grids">
		<div class="about-left">
			<div class="about-info">
				<h3>OAuth2.0简介</h3>
				<p>OAuth（开放授权）是一个开放标准，允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息，而不需要将用户名和密码提供给第三方网站或分享他们数据的所有内容。</p>
				<p>对于用户相关的OpenAPI（例如获取用户信息，成绩，课表等），为了保护用户数据的安全和隐私，第三方网站访问用户数据前都需要显式的向用户征求授权。</p>
			</div>
		</div>
		<div class="about-right">
			<img src="images/pic1.jpg" alt=""/>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!--//about-->
<!--behind-->
<div class="behind">
	<div class="container">
		<p>教务系统授权登录，让学生轻松入驻您的网站</p>
	</div>
</div>
<!--//behind-->
<!--approach-->
<div id="approach" class="approach">
	<div class="approach-grids">
		<div class="approach-left">
			<img src="images/pic2.jpg" alt=""/>
		</div>
		<div class="approach-right">
			<h3>关于我们</h3>
			<p>勤能补拙，笨鸟先飞；伤其十指不如断其一根。这是ACM的队训。</p>
			<p>从2006年开始，ACM经历了九年的磨练，历经2008年的第一届珠海区域赛、以及每年各种省级、友校邀请赛的锻炼和熏陶，2013年亚洲区域赛的突破，
			2014亚洲区域赛的巩固，ACM协会完成了从量变到质变的飞跃，在计算机学院的学生当中，也兴起了“ACM热潮”。</p>
			<p>2010年正式成立以来，ACM每学期、寒暑假都会面向全校义务开课，培训以“老带新”方式为主。学员从“让我学”转变为“我想学”，从40人，到如今的200多人，
			从只有计算机学院，到吸引其他学院、甚至友校的编程爱好者共同交流，影响力一步步加大。</p>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!--//approach-->
<!--kick
<div class="kick">
	<div class="container">
		<p>âKick start your reliability initiative with our equipment based Problem, Failure, Action Library. Contact us for a free demoâ</p>
	</div>
</div>
<!--//kick-->

<!--clients
<div class="clients">
	<div class="container">
		<h3>SOME OF OUR CLIENTS</h3>
		<div class="flex-slider">
			<ul id="flexiselDemo1">			
				<li>
					<img src="images/pic5.jpg" alt=""/>
				</li>
				<li>
					<img src="images/pic6.jpg" alt=""/>
				</li>
				<li>
					<img src="images/pic7.jpg" alt=""/>
				</li>
				<li>
					<img src="images/pic8.jpg" alt=""/>
				</li>
				<li>
					<img src="images/pic9.jpg" alt=""/>
				</li>
			</ul>
			<script type="text/javascript">
							$(window).load(function() {
								$("#flexiselDemo1").flexisel({
									visibleItems: 5,
									animationSpeed: 1000,
									autoPlay: true,
									autoPlaySpeed: 3000,    		
									pauseOnHover: true,
									enableResponsiveBreakpoints: true,
									responsiveBreakpoints: { 
										portrait: { 
											changePoint:320,
											visibleItems: 1
										}, 
										landscape: { 
											changePoint:640,
											visibleItems: 3
										},
										tablet: { 
											changePoint:768,
											visibleItems: 4
										}
									}
								});
								
							});
			</script>
			<script type="text/javascript" src="js/jquery.flexisel.js"></script>
		</div>
	</div>
</div>
<!--//clients-->
<!--keep in touch
<div class="keep">
	<div class="container">
		<h3>Keep in touch with Us</h3>
		<ul>
			<li><a class="facebook" href="#"></a></li>
			<li><a class="twitter" href="#"></a></li>
			<li><a class="googl" href="#"></a></li>
			<li><a class="message" href="#"></a></li>
		</ul>
	</div>
</div>
<!--//keep in touch-->
<!--footer-->
<%@ include file="public/footer.jsp" %>
<!--//footer-->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
</body>
</html>